<!--  -->
<template>
    <div class="app-container">
      <div class="filter-container">
              <el-input placeholder="请输入用户ID" v-model="listQuery.userId" clearable class="search-item"></el-input>
              <el-input placeholder="请输入商品ID" v-model="listQuery.valueId" clearable class="search-item"></el-input>
              <el-button  type="primary" :loading="searchLoading" icon="el-icon-search" @click="handleFilter">查找</el-button>
          </div>
          <el-table
          :data="tableData"
          style="width: 100%"
          border 
          :header-cell-style="{'text-align':'center'}"
          :default-sort = "{prop: 'id', order: 'descending'}" :cell-style="{ 'text-align': 'center' }"
          >
          <el-table-column
            prop="id"
            label="收藏ID"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="userId"
            label="用户ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="valueId"
            label="商品ID">
          </el-table-column>
          <el-table-column
            prop="addTime"
            label="添加时间">
          </el-table-column>
          </el-table>
          <div class="footerPage">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    </div>
  </template>
  <script >
  import { fatchList} from '@/api/collect/collect'
  export default {
      name:'',
      data() {
        return{
          listQuery: {
            page:1,
            limit:2,
            userId:'',
            name:'',
            sort: 'add_time',
            order: 'desc'
          },
          total:0,
          currentPage:'',
          searchLoading:false,
          tableData:[],
        }
      },
      props:[],
      components: {},
      created() {
          this.getList();
      },
      mounted() {
      },
      methods:{
          handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.listQuery.page = 1;
          this.getList();
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
          this.listQuery.page = val;
          this.getList();
        },
        getList(){
          fatchList(this.listQuery).then(res => {
            console.log(res);
            this.tableData = [];
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          })
        },
        handleFilter(){
          this.listQuery.page = 1;
          this.getList();
        }
      }
    };
  </script>
  <style scoped>
  .app-container {
          width: 98%;
          height: 100%;
          margin: auto
      }
      .filter-container{
          display: flex;
          justify-content: right;
          align-items: center;
      }
      .footerPage{
      margin-top: 20px;
      float: right;
    }
  </style>
  <style lang='scss'>
  .search-item{
        width: 200px;
        margin-right: 5px;
      }
  </style>